<template>
  <div class="usercenter">
    <div class="header">
      <div class="header_title">
        <div class="title_avatar">
          <img src="/images/avatar-01.jpg" alt="">
        </div>
        <div class="title_content">
          <div class="content_text">张三</div>
          <div class="content_sm">2024-04-25</div>
        </div>
      </div>
      <div class="operate">
        <div class="text-sm">
          <span class="text-bold">0</span>
          收藏夹
        </div>
        <div class="text-sm">
          <span class="text-bold">0</span>
          关注店铺
        </div>
        <div class="text-sm">
          <span class="text-bold">0</span>
          足迹
        </div>
        <!-- <router-link to=""> -->
        <div class="text-sm" @click="gotoOrders">
          <span class="text-bold">0</span>
          全部订单
        </div>
        <!-- </router-link> -->

      </div>
    </div>
    <div class="userorder">
      <div class="order_project">
        <div class="item">
          <router-link :to="{ path: '/myOrderList', query: { status: -2 } }" class="item">
            <van-icon name="paid" size="1.75rem" color="#6c6c6c" v-if="ordersdata.noPaynum == 0" />
            <van-icon name="paid" size="1.75rem" color="#6c6c6c" v-else :badge="ordersdata.noPaynum" />
            待支付
          </router-link>
        </div>
        <div class="item">
          <router-link class="item" :to="{ path: '/myOrderList', query: { status: 1 } }">
            <van-icon name="send-gift-o" size="1.75rem" color="#6c6c6c" v-if="ordersdata.paiednum == 0" />
            <van-icon name="send-gift-o" size="1.75rem" color="#6c6c6c" v-else dot />
            待发货
          </router-link>
        </div>
        <div class="item">
          <router-link class="item" :to="{ path: '/myOrderList', query: { status: 2 } }">
            <van-icon name="logistics" size="1.75rem" color="#6c6c6c" v-if="ordersdata.expressednum > 0"
              :badge="ordersdata.expressednum" />
            <van-icon name="logistics" size="1.75rem" color="#6c6c6c" v-else />
            待收货
          </router-link>
        </div>
        <div class="item">
          <router-link class="item" :to="{ path: '/myOrderList', query: { status: 3 } }">
            <van-icon name="comment-o" size="1.75rem" color="#6c6c6c" />
            待评价
          </router-link>
        </div>
        <div class="item solid-left">
          <router-link class="item" :to="{ path: '/myOrderList', query: { status: -1 } }">
            <van-icon name="gold-coin-o" size="1.75rem" color="#fe6600" />
            退货/售后
          </router-link>

        </div>
      </div>
    </div>
    <div class="userorder">
      <div class="order_project">
        <div class="item">
          <a href="retail.html" class="item">
            <div class="img"> <img src="/images/retail1.png" alt=""></div>
            分销信息
          </a>
        </div>
        <div class="item">
          <a href="retailmember.html" class="item">
            <div class="img"> <img src="/images/retail2.png" alt=""></div>
            分销会员
          </a>
        </div>
        <div class="item">
          <a href="kickback.html" class="item">
            <div class="img"> <img src="/images/retail3.png" alt=""></div>
            分销佣金
          </a>
        </div>
        <div class="item">
          <router-link to="coupon" class="item">
            <div class="img"> <img src="/images/coupon.png" alt=""></div>
            优惠列表
          </router-link>
        </div>
        <div class="item solid-left">
          <a href="deposit.html" class="item">
            <div class="img"> <img src="/images/recharge2.png" alt=""></div>
            充值中心
          </a>
        </div>
      </div>
    </div>
    <div class="usertool">
      <div class="list">
        <div class="item">
          <!-- <a href="profile.html"> -->
          <router-link to="/editMy">
            <div class="img">
              <img src="/images/profile.png" alt="">
            </div>
            基本资料
          </router-link>

          <!-- </a> -->
        </div>
        <div class="item">
          <a href="order.html">
            <div class="img"> <img src="/images/pingtuan.png" alt=""></div>
            拼团订单
          </a>
        </div>
        <div class="item">
          <router-link to="/address">
            <div class="img"> <img src="/images/address.png" alt=""></div>
            收货地址
          </router-link>
        </div>
        <div class="item">
          <a href="email.html">
            <div class="img"> <img src="/images/email.png" alt=""></div>
            邮箱认证
          </a>
        </div>
        <div class="item">
          <!-- <a href="record.html"> -->
          <router-link to="/orderRecord">
            <div class="img"> <img src="/images/consume.png" alt=""></div>
            消费记录
          </router-link>

          <!-- 消费记录 -->
          <!-- </a> -->
        </div>
        <div class="item">
          <a href="record.html">
            <div class="img"> <img src="/images/recharge1.png" alt=""></div>
            充值记录
          </a>
        </div>
      </div>
    </div>
    <div class="usertool">
      <ul class="proul">
        <li>
          <a href="detail.html"><img src="/images/7.jpg" /></a>
          <a href="detail.html">
            <p class="tit">北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅</p>
          </a>
          <div class="price">
            <p>￥2998</p>
          </div>
        </li>
        <li>
          <a href="detail.html"><img src="/images/4.jpg" /></a>
          <a href="detail.html">
            <p class="tit">松兰宾利实木餐桌椅组合后现代轻奢长方形大户型不锈钢8人饭桌</p>
          </a>
          <div class="price">
            <p>￥998</p>
          </div>
        </li>
        <li>
          <a href="detail.html"><img src="/images/5.jpg" /></a>
          <a href="detail.html">
            <p class="tit">卫生间洗手台柜面池洗睑台式壁挂台盆架瓷盥洗池饭店小号挂盆经济</p>
          </a>
          <div class="price">
            <p>￥368</p>
          </div>
        </li>
        <li>
          <a href="detail.html"><img src="/images/6.jpg" /></a>
          <a href="detail.html">
            <p class="tit">布艺床主卧大床双人床港式轻奢ins网红床卧室北欧家具床现代简约</p>
          </a>
          <div class="price">
            <p>￥3998</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="h54"></div>
    <div class="clear"></div>
  </div>
  <div class="footerBox">
    <Tab :modelValue="currentTab" @update:modelValue="handleTabUpdate"></Tab>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Tab from './comm/Tab.vue';
import { ref, onMounted } from 'vue';
import { POST } from '../services/request';

// 存放订单数据
const ordersdata = ref([])

// 存放用户信息
const userData = JSON.parse(localStorage.getItem('LoginUser'))

const router = new useRouter

onMounted(async () => {
  await getOrders();
})

// 获取订单数据
const getOrders = async () => {
  // console.log(userData.id);
  const getOrdersRes = await POST({
    url: 'Order/getAboutOrder',
    params: {
      uid: userData.id
    }
  })
  if (getOrdersRes.code) {
    ordersdata.value = getOrdersRes.data;
    console.log(ordersdata.value);

  }
}

const currentTab = ref('about'); // 当前选中的标签页
const handleTabUpdate = (newValue) => {
  currentTab.value = newValue; // 更新父组件的状态
};

const gotoOrders = () => {
  router.push('/myOrderList')
}


</script>

<style></style>